<template>
  <div style="width: 100%">
    <n-data-table :columns="columns" :data="list" :row-key="(row) => row['id'] || row['mid']" />
  </div>
</template>
<script setup lang="jsx">
import * as projectApi from '@/api/project'
defineOptions({ name: 'Problem' })
const props = defineProps({
  header: {
    type: Object,
    default: () => ({}),
  },
  level: {
    type: Number,
    default: 5,
  },
  projectId: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const problemList = defineModel({
  type: Array,
  default: () => [],
})
const handle = {}
const list = computed(() => [props.header].concat(problemList.value).concat([handle]))
const columns = [
  {
    title: '',
    key: 'userId',
    width: 200,
    colSpan: (_, rowIndex) => (rowIndex === problemList.value.length + 1 ? props.level + 2 : 1),
    render(row, index) {
      if (index === 0) {
        return row.userName
      } else if (index === problemList.value.length + 1) {
        return (
          <n-button
            disabled={props.disabled}
            type="primary"
            size="small"
            class="mt-20"
            onClick={handleAdd}
          >
            添加
          </n-button>
        )
      } else {
        return (
          <AsyncSelect
            options={getUserOptions}
            value={row.userId}
            onUpdateValue={(val) => handleChange(index - 1, 'userId', val)}
            label-key="personName"
            value-key="personId"
            placeholder="请选择人员"
            disabled={props.disabled}
          />
        )
      }
    },
  },
  ...Array.from({ length: props.level }).map((_, index) =>
    generateProblemCount(
      `${index + 1}级问题数`,
      `problemLevel${index + 1}`,
      `problemNameLevel${index + 1}`
    )
  ),
  {
    title: '操作',
    key: 'action',
    width: 80,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row, index) {
      if (index === 0) {
        return ''
      } else {
        return (
          <n-button disabled={props.disabled} text onClick={() => handleDel(index - 1)}>
            删除
          </n-button>
        )
      }
    },
  },
]
function getUserOptions() {
  return projectApi.devPersonList({ projectId: props.projectId }).then((res) => res.data)
}
function generateProblemCount(title, key, name) {
  return {
    title,
    key,
    width: 200,
    render(row, index) {
      if (index === 0) {
        return <div v-html={row[name]}></div>
      } else {
        return (
          <n-input-number
            value={row[key]}
            onUpdateValue={(val) => handleChange(index - 1, key, val)}
            disabled={!row.userId || props.disabled}
            min={0}
            max={10000}
          />
        )
      }
    },
  }
}
function generateMold() {
  return {
    userId: null,
    ...Object.fromEntries(
      Array.from({ length: props.level }).map((_, index) => [`problemLevel${index + 1}`, null])
    ),
    mid: Date.now(),
  }
}
function handleAdd() {
  problemList.value.push(generateMold())
}
function handleDel(index) {
  problemList.value.splice(index, 1)
}
function handleChange(index, key, value) {
  problemList.value[index][key] = value
}
</script>
<style lang="scss" scoped></style>
